<template>
    <div>
      <el-button  type="text" @click="dialogFormVisible = true;operateType='save'">添加订单商品</el-button>
  
      <el-dialog :visible.sync="dialogFormVisible" title="订单商品信息" @close="handleClose">
        <el-form :model="orderproduct">
          <el-form-item :label-width="formLabelWidth" label="编号">
            <el-input v-model="orderproduct.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="订单编号">
            <el-input v-model="orderproduct.order_id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="商品编号">
            <el-input v-model="orderproduct.product_id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="商品数量">
            <el-input v-model="orderproduct.product_num" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">确定</el-button>
        </div>
      </el-dialog>
  
      <el-table :data="orderproducts" style="width: 100%">
        <el-table-column label="编号" min-width="100">
          <template slot-scope="scope">
            <td>{{ scope.row.id }}</td>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" min-width="100">
          <template slot-scope="scope">
            <td>{{ scope.row.order_id }}</td>
          </template>
        </el-table-column>
        <el-table-column label="商品编号" min-width="100">
          <template slot-scope="scope">
            <td>{{ scope.row.product_id }}</td>
          </template>
        </el-table-column>
        <el-table-column label="商品数量" min-width="100">
          <template slot-scope="scope">
            <td>{{ scope.row.product_num }}</td>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件，:current-page：当前页，
     :page-size：每页显示的记录数，
     :total：总记录数，
     :layout：分页布局，
     :background：背景颜色，
     :prev-text：上一页按钮文字，
     :next-text：下一页按钮文字，
     :hide-on-single-page：只有一页时隐藏分页组件，
     :current-change：当前页码变化时触发的函数 -->
      <el-pagination
          :current-page="current"
          :page-size="pageSize"
          :total="total"
          background
          layout="prev, pager, next"
          @current-change="loadOrderProduct">
      </el-pagination>
    </div>
  </template>
  
  <script>
  export default {
    name: "OrderProductView",
    data() {
      return {
        //存储用户列表的数组
        orderproducts: [],
        //控制对话框显示，默认为隐藏
        dialogFormVisible: false,
        //控制对话框关闭
        dialogTableVisible: false,
        //表单标签的宽度
        formLabelWidth: '120px',
        // 存储用户信息的对象，包括用户ID，用户名，用户密码，用户类型
        orderproduct: {id: '', order_id: '', product_id: '', product_num: ''},
        // 操作类型，用于区分保存或更新操作
        operateType: '',
        // 分页信息，总记录行数
        total: 0,
        // 当前页码
        pageSize: 5,
        // 每页显示的记录数
        current: 1,
      }
    },
    methods: {
      // 加载用户列表
      loadOrderProduct(current) {
        // 将传入的当前页码赋值给current
        this.current = current
        //调用后台的方法，参数是url
        this.$http.get('orderProducts?m=page&current=' + this.current + '&pageSize=' + this.pageSize)
            .then(resp => {
          //数据绑定
          if (resp.data.data) {
            console.log("加载订单商品数据绑定",resp.data.data)
            this.orderproducts = resp.data.data.records
            this.total = resp.data.data.total
          }
        })
      },
      // 编辑用户
      handleEdit(index, row) {
        // 打印索引和用户信息以便调试
        console.log("编辑订单商品信息",index, row);
        // 设置操作类型为更新
        this.operateType = 'update';
        // 显示对话框，绑定数据
        this.dialogFormVisible = true;
        // 进行深克隆，以避免直接修改原始数据
        this.orderproduct = JSON.parse(JSON.stringify(row));
      },
      // 删除商品信息，列表索引，被选中删除的用户信息
      handleDelete(index, row) {
        // 打印索引和用户信息以便调试
        console.log("删除商品订单信息",index, row);
        // 使用confirm对话框提示用户是否确定删除
        this.$confirm('是否确定删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发送删除请求
          this.$http.post('orderProducts?m=delete&id=' + row.id).then(resp => {
            // 处理后台返回的结果
            if (resp.data.data == true) {
              // 重新加载用户列表
              this.loadOrderProduct(this.current);
              // 显示成功消息
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 保存用户信息
      handleSave() {
        // 根据操作类型来判断是添加还是更新数据
        if (this.operateType == 'save') {
          // 添加用户，发送保存请求
          this.$http.post('orderProducts?m=save', this.$qs.stringify(this.orderproduct))
              .then(resp => {
                // 判断是否保存成功
                if (resp.data.data == true) {
                  // 打印保存成功信息，便于调试
                  console.log('保存订单商品信息成功')
                  // 重新加载用户列表
                  this.loadOrderProduct(this.current);
                }
              })
        } else {
          //更新用户，发送更新请求
          this.$http.post('orderProducts?m=update', this.$qs.stringify(this.orderproduct))
              .then(resp => {
                // 打印请求结果，便于调试
                console.log('更新订单商品信息', resp.data)
                // 判断是否更新成功
                if (resp.data.data == true) {
                  // 打印更新成功信息，便于调试
                  console.log('更新订单商品信息')
                  // 重新加载用户列表
                  this.loadOrderProduct(this.current);
                }
              })
        }
        // 关闭对话框
        this.dialogFormVisible = false;
      },
      // 清除对话框数据
      handleClose() {
        // 重置用户信息对象和操作类型
        this.orderproduct = {id: '', order_id: '', product_id: '', product_num: ''},
        // 清空操作类型
        this.operateType = ''
      }
    },
    //页面挂载钩子
    mounted() {
      this.loadOrderProduct(this.current)
    }
  }
  </script>

  <style>
  .el-table .warning-row {
    background: oldlace;
  }
  
  .el-table .success-row {
    background: #f0f9eb;
  }
  </style>